<template>
<div class="app-container">
     <el-card>
        <div slot="header" class="clearfix">
                <span>搜索条件</span>
        </div>
        <div class="filter-container">
            <div style="display:flex;align-items:center">
                <p style="font-size:14px;margin-right:10px">创建时间</p>
                <el-button :type="data == item.value ? 'primary' : ''" v-for="item in dataList" :key="item.name" @click="setData(item)" size="mini">{{item.name}}</el-button>
                <el-button size="mini" ref="time" @click="setData({value:'zd',is_zd:true})" :type="data == 'zd'? 'primary' : ''">自定义</el-button>
                <el-date-picker 
                    v-model="data"
                    style="margin-left:10px"
                    v-show="showtime==true"
                    type="daterange"
                    size="mini"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                 </el-date-picker>
            </div>
            <div style="margin-top:25px">
                 <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="search">
                {{ '搜索' }}
            </el-button>
              <el-button v-waves  class="filter-item" type="info" icon="el-icon-refresh-left" size="mini" @click="refresh">
                {{ '重置' }}
            </el-button>
            </div>
            
        </div>
     </el-card>
     <el-row :gutter="20" style="margin-top:20px;font-size:14px">
        <el-col :span="item.col!=undefined ? item.col : 6" v-for="item in badge" :key="item.name">
            <el-card class="box-card">
                <div slot="header">
                    <span>{{item.name}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{item.field}}</el-button>
                </div>
                <div>
                     <span>{{item.count}}</span>
                     <p v-if="item.content!=undefined"  style="display:flex;justify-content:space-between">
                        {{item.content}}
                        <span>{{item.sum}}<i :class="item.class"></i></span>
                    </p>
                </div>
              
            </el-card>
    </el-col>
    </el-row>
     <el-card style="margin-top:20px">
        <div slot="header" class="clearfix">
                <span>图表展示</span>
        </div>
        <div class="filter-container" ref="echarts_list" style="width:100%;height:450px">
            
        </div>
     </el-card>    
</div>
 
</template>

<script>
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import * as echarts from 'echarts'
import {getExtractHead,getExtractData} from '@/api/record' // api接口
require('echarts/theme/macarons') // echarts theme
export default{
    name: 'chart_order',
     directives: { waves, permission }, // 引入指令
    data() {
        return {
               option: {},
                badge:[],
                dataList: [
                    {name: '全部', value: ''},
                    {name: '今天', value: 'today'},
                    {name: '本周', value: 'week'},
                    {name: '本月', value: 'month'},
                    {name: '本季度', value: 'quarter'},
                    {name: '本年', value: 'year'},
                ],
                data: '',
                myChart: {},
                showtime: false,
        }
    },
    methods:{
        getBadgeList:function(){
            var that=this;
            getExtractHead({data:this.data}).then((res)=>{
                that.badge=res.data;
            })
        },
        getExtractData:function(){
            var that=this;
            getExtractData({data:this.data}).then((rem)=>{
                var option=that.setoption(rem.data.chatrList,rem.data.legdata,rem.data.xdata,rem.data.zoom);
                that.myChart.list.setOption(option);
            })
        },
         setData:function(item){
            var that=this;
            if(item.is_zd==true){
                that.showtime=true;
                this.data=this.$refs.date_time.innerText;
            }else{
                this.showtime=false;
                this.data=item.value;
            }
        },
        setoption:function(seriesdata,legdata,xdata,dataZoom){
            this.option={
                tooltip: {show: true},
                title: {text:'提现金额和人数统计图'},
                legend: {data:legdata,},
                toolbox: {show : true,},
                xAxis : [{type : 'category', data :xdata,}],
                yAxis : [{type : 'value'}],
                series:seriesdata,
            };
            if(dataZoom!=''){
                this.option.dataZoom=[{startValue:dataZoom},{type:'inside'}];
            }
            return this.option;
        },
        search:function(){
            this.getExtractData();
        },
        refresh:function () {
            this.data='';
            this.getExtractData();
        },
        setChart:function(name,myChartname){
            this.myChart[myChartname]=echarts.init(name);
        },

         checkPermission // 权限判断函数
    },
      mounted:function () {
            var that =  this;
        this.setChart(this.$refs.echarts_list,'list');
        this.getBadgeList();
        this.getExtractData();
    }
}

</script>
